<template>
	<view>
		<view class="me_header">
			<view class="me_img_bg">
				<image :src='imgBg' mode="heightFix"></image>
			</view>
			<view class="me_header_info">
				<view class="headerImg">
					<image @click="editHeaderClick" :src="userimg?userimg:headerImg" mode="aspectFill"></image>
				</view>
				<view class="me_phone">{{phone}}</view>
				<!-- <view @click="toEdit" class="me_edit">
					<image :src="editImg" mode="aspectFill"></image>
					编辑
				</view> -->
			</view>

		</view>

		<!-- 显示红包，vip保养劵，优惠券等布局 -->
		<view class="nav">
			<view class="nav_iem" v-for="(item,index) in mountList" :key="index" @click="navAmountItemTo">
				<view class="nav_money">
					{{amount_Diamond}}
				</view>

				<view class="nav_money_text">
					<text>{{item.title}}</text>
				</view>

			</view>
		</view>


		<!--订单模块 -->
		<view class="nav_order">
			<view class="myOrderTitle">
				<view class="line">

				</view>

				<view class="text">我的订单

				</view>

			</view>
			<view class="nav_item_order" v-for="(item,index) in orderNavArr" :key="index" @click="navOrderItemTo(item.type)">
				<view class="nav_order_img">
					<image :src="item.img"></image>
				</view>

				<view class="nav_order_text">
					<text>{{item.name}}</text>
				</view>


			</view>
		</view>

		<!-- 服务 -->
		<view class="nav_service">

			<view class="myServiceTitle">
				<view class="line">

				</view>
				<view class="text">服务

				</view>


			</view>

			<view class="nav_item_service" v-for="(item,index) in serveArr" :key="index" @click="navServiceItemTo">
				<view class="nav_service_img">
					<image :src="item.img"></image>
				</view>
				<view class="nav_service_text">
					<text>{{item.name}}</text>
				</view>


			</view>

		</view>
	</view>
</template>

<script>
	export default {
		
		onShow() {
			this.getMedata()
		},
		
		// created() {
		// 	this.getMedata()
		// },
		data() {
			return {
				phone: '17798171088',
				userimg: '',
				// editImg: '/static/bianji.png',
				imgBg: '/static/mebg.png',
				headerImg: '/static/logo.png',

				meLine: '/static/meline.png',

				amount_Red: '0.0',
				amount_vip: '0.0',
				amount_Diamond: '0.0',
				
				data:{},

				mountList: [{
						navId: 1,
						title: '钻石保养券(元)'
					},
					{
						navId: 2,
						title: 'VIP保养券(元)'
					},
					{
						navId: 3,
						title: '红包(元)'
					}
				],
				//订单数组
				orderNavArr: [{
						'img': '/static/my_dfk.png',
						name: '待付款',
						type: 1
					},
					{
						'img': '/static/my_dpj.png',
						name: '待评价',
						type: 2
					},
					{
						'img': '/static/my_qb.png',
						name: '全部订单',
						type: 0
					},
					{
						'img': '/static/my_wdpj.png',
						name: '我的评价',
						type: 3
					}
				],

				serveArr: [{
						'img': '/static/vipbyq.png',
						name: 'VIP保养券',
						type: 1
					},
					{
						'img': '/static/wytg.png',
						name: '我要推广',
						type: 2
					},
					{
						'img': '/static/jcfw.png',
						name: '检车服务',
						type: 3
					},
					{
						'img': '/static/yhtj.png',
						name: '账户统计',
						type: 4
					},
					{
						'img': '/static/zfmm.png',
						name: '支付密码',
						type: 5
					},
					{
						'img': '/static/lxkf.png',
						name: '联系客服',
						type: 6
					},
					{
						'img': '/static/yjfk.png',
						name: '意见反馈',
						type: 7
					},
					{
						'img': '/static/yysz.png',
						name: '应用设置',
						type: 8
					}
				],

			}
		},
		methods: {
           
		   // 获取我的页面数据
		  async getMedata(){
			  const res=await this.$myRequest({
			   	url:"user/home_nav",
			   	data:{
			   		phone:"17798171088",
			   	
			   	}
			   }).then(res=>{
				     console.log(res.return.list)
			   }).catch(err=>{
				   
			   })
			
		   },
		   
		   
			// 编辑信息
			editInfoClick() {
				
			},

			// 编辑头像信息
			editHeaderClick() {

			},

			// 订单点击
			navOrderItemTo( type) {
				
				console.log(type)
				uni.navigateTo({
					url:type!=3? '/pages/order/order':'/pages/mycomments/mycomments'
					
				})
			

			},

			// 服务的点击
			navServiceItemTo() {

			}


		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: $bg-color;
	}

	// 头部信息css
	.me_header {
		display: flex;
		width: 750rpx;
		height: 500rpx;
		margin-top: -150rpx;

		// 背景图片
		.me_img_bg {
			image {
				width: 750rpx;
				height: 500rpx;
			}
		}

		.me_header_info {
			margin-top: 330rpx;

			position: fixed;
			line-height: 80rpx;

			display: flex;

			.headerImg {
				image {
					width: 80rpx;
					height: 80rpx;
					margin: auto 20rpx;

				}

			}

			.me_phone {
				font-size: 30rpx;
				color: #fff;
				line-height: 80rpx;

			}

			// .me_edit {
			// 	color: #fff;
			// 	font-size: 26rpx;
			// 	margin-left: 300rpx;

			// 	image {
			// 		width: 25rpx;
			// 		height: 25rpx;
			// 		margin-right: 10rpx;

			// 	}

			// }


		}

	}

	// 红包，钻石，vip样式
	.nav {
		//开启flex布局在一行显示
		display: flex;
		border-radius: 10rpx;
		width: 700rpx;
		height: 150rpx;
		background: $white-color;
		position: fixed;
		margin-top: -65rpx;
		margin-left: 25rpx;
		box-sizing: border-box;

		// 设置每个宽度为25%
		.nav_iem {
			width: 35%;
			height: 150rpx;
			color: #333;
			padding-top: 15rpx;
			text-align: center;
			// margin: 10rpx auto;
			display: grid;

			// margin-top: 15rpx;


			.nav_money {
				text-align: center;
				//上下，左右
				margin: 10rpx auto;
				font-size: 26rpx;


			}

			.nav_money_text {
				font-size: 30rpx;
				color: $base-color;
				margin-top: -40rpx;
				text-align: center;
			}

		}
	}

	// 订单模块
	.nav_order {
		//开启flex布局在一行显示

		background: $white-color;
		border-radius: 10rpx;
		color: $hint-color;
		margin-left: 25rpx;
		width: 700rpx;
		height: 200rpx;
		margin-top: 100rpx;
		// 在一行显示
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;

		// 我的订单和竖线
		.myOrderTitle {
			width: 700rpx;
			height: 60rpx;
			font-size: 26rpx;
			color: #666666;
			// 在一行显示
			display: flex;

			.line {
				margin-left: 30rpx;
				margin-top: 25rpx;
				width: 8rpx;
				height: 20rpx;
				background-color: $base-color;


			}

			.text {
				margin: auto 20rpx;
			}


		}


		// 设置每个宽度为25%
		.nav_item_order {
			width: 25%;
			height: 120rpx;
			padding-top: 10rpx;
			text-align: center;
			// margin: 10rpx auto;
			display: grid;
			// margin-top: -30rpx;

			.nav_order_img {
				width: 48rpx;
				height: 48rpx;
				// 上下，左右
				// margin: 0 auto;

				//上下，左右
				margin: 10rpx auto;

				image {
					width: 100%;
					height: 100%;

				}

			}

			.nav_order_text {
				font-size: 24rpx;
				color: #666666;
				text-align: center;
			}
		}
	}



	// 服务模块
	.nav_service {
		//开启flex布局在一行显示
		background: $white-color;
		border-radius: 10rpx;
		color: $hint-color;
		margin-left: 25rpx;
		width: 700rpx;
		height: 360rpx;
		margin-top: 20rpx;
		// 在一行显示
		display: flex;
		flex-wrap: wrap;

		// justify-content: space-between;
		// box-sizing: border-box;
		//  服务
		.myServiceTitle {
			width: 700rpx;
			height: 60rpx;
			font-size: 26rpx;
			color: #666666;
			// 在一行显示
			display: flex;

			.line {
				margin-left: 30rpx;
				margin-top: 20rpx;
				width: 8rpx;
				height: 20rpx;
				background-color: $base-color;


			}

			.text {
				margin: auto 20rpx;
			}


		}

		// 设置每个宽度为25%
		.nav_item_service {
			width: 25%;
			height: 130rpx;
			display: grid;
			padding-top: 10rpx;

			// background: #007AFF;

			.nav_service_img {
				width: 48rpx;
				height: 48rpx;


				//上下，左右
				margin: 10rpx auto;


				image {
					width: 100%;
					height: 100%;

				}

			}

			.nav_service_text {
				font-size: 24rpx;
				color: #666666;
				text-align: center;
			}
		}
	}
</style>
